import React, { useMemo, useEffect, useState } from 'react';
import s from './style.module.css';
import { withRouter } from 'react-router';
import PropTypes from 'prop-types';
import Table from '@knownsec/react-component/dist/Table';
import EmptyData from '../../../../../../components/empty/EmptyData';
import Pagination from '@knownsec/react-component/dist/Pagination';
import { getParams, turnToUrlparam, GetQueryString } from '../../../../../../helpers/getUrlParams';
import cn from 'classnames';
import { Link } from 'react-router-dom';
import Button from '@kuiper-components/button';
import Input from '@kuiper-components/input';
import Icon from '@knownsec/react-component/dist/Icon'
import fetchFer from 'API/fetch';
import Select, { Option } from '@kuiper-components/select';
import { Search24 as SearchIcon } from '@carbon/icons-react';
import { WARNING_CATEGORY_KEY_LABEL_MAP } from '../../../../../../../common/constants'
import NewTable from '../../SecurityEventDetail/Table/NewTable';
import moment from 'moment'
import { cloneDeep } from 'lodash';
const defaultFilter = {
	page: 1,
	limit: 10,
};

let setT = null;
function Detail({
	match: {
		params: { assetType },
	},
	jid,
	location,
	tid,
	atid,
	data,
	taskType,
	isHistory,
	webDataLoading,
	enableTaskType,
	refresh
}) {
	const id = GetQueryString(location.search, 'id');
	const resD = JSON.parse(sessionStorage.resD).feature;
	const type = ['暗链', '风险外链', '坏链', '挖矿', '挂马']
	const tp = 'img'
	// const data = {
	// 	task: {
	// 		isLatestTask: true
	// 	}
	// }

	const [loading, setLoading] = useState(false)
	const job = { cydEnabled: false }
	const [tableData, setTableData] = useState({
		'暗链': [],
		'风险外链': [],
		'坏链': [],
		'挖矿': [],
		'挂马': []
	})
	const getData = () => {
		const resultData = {
			'暗链': [],
			'风险外链': [],
			'坏链': [],
			'挖矿': [],
			'挂马': []
		}
		data?.warnings?.map(item => {
			const a = cloneDeep(item)
			a.tid = data.task_id
			a.key = a._id
			resultData[WARNING_CATEGORY_KEY_LABEL_MAP.securityEvent[item.category]].push(a)
		})
		setTableData(resultData)
	};
	useEffect(() => {
		getData()
	}, [data])
	const refetch = () => {}
	return (
		<div className={s.tableMain}>
			{!isHistory && (Object.keys(data).length > 0  || (enableTaskType.indexOf('securityEvent') > -1)) &&
				<div className={cn(s.flex, s.aic, s.mb20)}>
					<Icon type='time' />
					<span className={cn(s.pl10, s.pr20)}>{Object.keys(data).length === 0 || !data?.task_session_id ? '- -' : moment(data?.time_info?.end_time).format('YYYY-MM-DD HH:mm:ss')}</span>
					{taskType !== 'manual' && Object.keys(data).length > 0 && data?.task_session_id && <Link to={{
						pathname: '/job-manage/web-task/history/',
						search: `asset_task_id=${atid}&task_id=${data?.task_id}&task_types=security_event`,
					}}>查看历史任务</Link>}
				</div>
			}
			{type.map(item => (
				<NewTable
					id={id}
					notStatus={false}
					isModified={true}
					title={item}
					loading={webDataLoading}
					cydEnabled={job?.cydEnabled}
					taskId={data?.task_id}
					atid={atid}
					isHistory={isHistory}
					taskType={taskType}
					data={tableData}
					empty={<EmptyData emptyType={Object.keys(data).length === 0 ? enableTaskType.indexOf('securityEvent') > -1 ? 'dataLoading' : 'noPrmission' : 'noData'} text={
						function () {
							let text = '暂无数据'
							if (webDataLoading) return text
							if (Object.keys(data).length > 0) {
								if (data?.task_session_id) {
									text = '暂无数据'
								} else {
									text = <div>任务数据已过期，您可
										{/* <span className='cp main-color' onClick={() => {
											window.location.href = `/#/job-manage/create-job-all?assetType=web&jid=${jid}&isSchedule=true`
										}}> 重新下发 </span> */}
										重新下发监测任务</div>
								}
							} else if (taskType === 'manual' && !resD.securityEventManualTask) {
								text = '当前套餐不支持该监测项，请先升级套餐。'
							} else if (taskType === 'schedule' && !resD.securityEventTask) {
								text = '当前套餐不支持该监测项，请先升级套餐。'
							} else if (Object.keys(data).length === 0) {
								if (enableTaskType.indexOf('securityEvent') > -1) {
									text = <span style={{color: 'rgba(0,0,0,.5)'}}>当前任务正在监测中...</span>
								} else {
									text = '当前任务未启用该监测项，请前往任务配置进行调整。'
								}
							}
							return text
						}()} type={tp} className={s.nobor} />}
					refetch={refetch}
					refresh={refresh}
				/>
			))}
		</div>
	);
}
Detail.propTypes = {
	tid: PropTypes.any,
	atid: PropTypes.any,
	match: PropTypes.shape({
		params: PropTypes.shape({
			assetType: PropTypes.string.isRequired,
		}).isRequired,
	}).isRequired,
};
export default withRouter(Detail);
